<template>
  <div class="login-container">
    <video autoplay="" loop="" muted="" class="custom-video" poster="">
      <source src="./videos/video.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>

    <main class="login-box">
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on"
        label-position="left">

        <div class="title-men">
          <div class="title-container">
            <h3 class="title">国家科技传播中心运维平台</h3>
          </div>
          <el-form-item prop="username">
            <el-input ref="username" v-model="loginForm.username" placeholder="账号" name="username" type="text"
              tabindex="1" autocomplete="on" />
          </el-form-item>
          <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
            <el-form-item prop="password">
              <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
                placeholder="密码" name="password" tabindex="2" autocomplete="on" @keyup.native="checkCapslock"
                @blur="capsTooltip = false" @keyup.enter.native="handleLogin" />
            </el-form-item>
          </el-tooltip>
          <el-button :loading="loading" type="primary" style="width:100%;"
            @click.native.prevent="handleLogin">登陆</el-button>
        </div>

      </el-form>
    </main>

    <el-dialog title="Or connect with" :visible.sync="showDialog">
      Can not be simulated on local, so please combine you own business simulation! ! !
      <br>
      <br>
      <br>
      <social-sign />
    </el-dialog>

  </div>
</template>

<script>
import axios from 'axios';
const { ipcRenderer } = window.require('electron');
import { serviceCAD,serviceExe,serviceFront } from '../../api/axios';

export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur' }],
        password: [{ required: true, trigger: 'blur' }]
      },
      passwordType: 'password',
      capsTooltip: false,
      loading: false,
      showDialog: false,
    }
  },
  mounted() {
    const parseUrl = decodeURIComponent(window.location.href);
    console.log(parseUrl);
    const queryParams = this.getQueryParams(parseUrl);
    console.log(queryParams);
    if (queryParams && queryParams.exe) {
      this.handleLogin(queryParams.username, queryParams.password, queryParams.loginUrl);
    }
  },
  destroyed() {
  },
  methods: {
    getQueryParams(url) {
      let params = {};
      let queryString = url.split('?')[1];
      if (!queryString) return params;
      queryString.split('&').forEach(param => {
        let [key, value] = param.split('=');
        params[key] = decodeURIComponent(value);
      });
      return params;
    },
    async handleLogin(username, password, loginApiUrl) {
      try {
        const params = { username, password };
        const response = await axios.post(loginApiUrl, params);
        console.log(response);
        if (response.data.code == 200) {
          const token = response.data.data.token; // 是否需要存储当前token值
          console.log(token);
          serviceCAD.defaults.headers.common['Authorization'] = token || '';
          serviceExe.defaults.headers.common['Authorization'] = token || '';  // wjh
          serviceFront.defaults.headers.common['Authorization'] = token || ''; // wjh
          ipcRenderer.invoke('set-token', token);
          ipcRenderer.send('store-set', 'token', token);
          this.$router.push("/visual");
        } else {
          this.$message.error(response.data.message || '登录失败');
        }
      } catch (error) {
        console.error('登录请求出错:', error);
        this.$message.error('服务器错误，请稍后再试');
      }
    },
  }
}
</script>

<style lang="scss">
.el-form-item__content {
  line-height: 32px;
}

/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #283443;
$light_gray: #fff;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.login-container {
  user-select: none;

  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;

    input {
      background: transparent;
      border: 0px;
      border-radius: 0px;
      color: $light_gray;
      box-sizing: border-box;
    }
  }

  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }
}
</style>


<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;


.login-container {
  min-height: 100%;
  width: 100%;
  background-color: none;
  overflow: hidden;
  position: relative;

  .custom-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }

  .login-box {

    .login-form {
      max-width: 100%;
      height: 100vh;
      overflow: hidden;
      z-index: 9;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .tips {
      font-size: 14px;
      color: #fff;
      margin-bottom: 10px;

      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }

    .title-container {
      position: relative;

      .title {
        font-size: 18px;
        color: $light_gray;
        text-align: center;
        font-weight: bold;
      }
    }

    .title-men {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 310px;
      height: 210px;
      background: rgba(41, 41, 41, 0.5);
      box-shadow: 0 0 32px 1px rgba(255, 255, 255, 0.747);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      box-sizing: border-box;
      padding: 0px 20px;

      .el-form-item {
        margin-top: 10px;
        margin-bottom: 0px !important;

      }

      .el-input {
        height: 10px;
      }

      .el-button {
        margin-top: 15px;
      }
    }

    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
    }

    .thirdparty-button {
      position: absolute;
      right: 0;
      bottom: 6px;
    }

    @media only screen and (max-width: 470px) {
      .thirdparty-button {
        display: none;
      }
    }
  }

}
</style>
